<template>
	<view class="cards-detail-index">
		<!-- 卡券 -->
		<view class="cards-detail-container">
			<view class="cards-info">
				<view class="cards-name">
					周卡
				</view>
				<view class="cards-content">
					每日福利大放送
				</view>
				<view class="cards-content">
					更多权益等你来领
				</view>
			</view>
			<!-- 权益 -->
			<view class="benefits-title">
				<view class="line"></view>
				<view class="benefits-title-name">会员权益</view>
				<view class="line"></view>
			</view>
			<view class="benefits-list">
				<view v-for="item in 9" :key="item">权益 {{ item }}</view>
			</view>
		</view>
		<!-- 购买按钮 -->
		<view class="buying-bottom">
			<view class="buying-container">
				<view class="left">
					7天
					<text class="price">￥20.00</text>
				</view>
				<view class="right" @click="payOrder">
					立即购买
				</view>
			</view>
		</view>
		<!-- 支付弹窗 -->
		<simplePayOrder ref="simplePayOrder"></simplePayOrder>
	</view>
</template>

<script>
	import simplePayOrder from '@/components/simple-pay-order/simple-pay-order.vue';
	export default {
		data() {
			return {
				
			}
		},
		components: {
			simplePayOrder,
		},
		methods: {
			// 调出支付弹窗
			payOrder(){
				this.$refs.simplePayOrder.open();
			}
		},
		onLoad() {
			
		}
	}
</script>

<style scoped lang="scss">
@import './cards-detail.scss';
</style>
